<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-image: url("../imagconman/rabbit.gif");
            background-size: 100px;
            position: absolute;
            left: 0;
        }
        #box3{
            width: 100px;
            height: 100px;
            background: url("../imagconman/tortoise.gif") no-repeat;
            background-size: 100px;
            position: absolute;
            left: 0;
            top: 200px;
        }
        #box2{
            width: 0;
            height: 1000px;
            border-left:1px black solid;
            position: absolute;
            left: 600px;
            top: 0;
        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            // var timer;
            btn01.onclick=function () {
                move(box1,600,10);
            };
            btn02.onclick=function () {
                move(box1,0,10);
            };
            //定义一个变量 用于保存定时器的标识
            /*参数 obj要执行动画的对象

            *      speed移动的速度(正数向右移动，负数向左移动)
            *      target执行动画的目标位置
            * */
            var bnt03=document.getElementById("btn03");
            btn03.onclick=function () {
                move(box3,600,10)
            };
            var btn04=document.getElementById("btn04");
            btn04.onclick=function () {
                move(box3,0,10)
            };

            function move(obj,target,speed) {
                clearInterval(obj.timer);//清除上一次的定时器
                var current=parseInt(getStyle(obj,"left"));
                //判断速度的正负值 如果从0到600移动 则speed为正
                //                如果从600到0移动 则speed为负
                if (current>target){
                    speed=-speed;
                }
                //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器标识
                obj.timer=setInterval(function () {
                    var oldValue=parseInt(getStyle(obj,"left"));
                    // alert(oldValue);
                    var newValue=oldValue+speed;
                    //newValue到达0时 停住
                    //向右移动时，需要判断newValue是否大于target,
                    //向左移动时，需要判断newValue是否小于target
                    if ((speed>0&&newValue>target)||(speed<0 && newValue<target)){
                        newValue=target;
                    }
                    obj.style.left=newValue+"px";
                    if (newValue==target){
                        clearInterval(obj.timer);
                    }
                },30)
            }
            function getStyle(obj,name) {  //获取当前元素的样式 获取元素的任意样式
                if (window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];  //正常浏览器的方式 具有getComputedStyle()的方法
                }else {
                    return  obj.currentStyle[name]; //current当前的  //IE8用
                }//第一种方式 也可以用下面的三元运算符 ture?语句1：语句2
                // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
            }
        };

    </script>
</head>
<body>
<button id="btn01">兔子向右移动</button>
<button id="btn02">兔子向左移动</button>
<button id="btn03">乌龟向右移动</button>
<button id="btn04">乌龟向左移动</button>
<br />
<br />
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>